<template>
	<div class="content">
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="filter-list">
					<div class="filter-item">
						<span class="filter-title">订单状态：</span>
						<el-select
							size="mini"
							filterable
							placeholder="请选择订单状态"
							style="width: 140px"
							v-model="selects.status"
							@change="val => refresh({ status: val, page: 1 })"
						>
							<el-option value label="全部"></el-option>
							<el-option label="待发货" :value="1"></el-option>
							<el-option label="待收货" :value="2"></el-option>
							<el-option label="已完成" :value="3"></el-option>
						</el-select>
					</div>
					<div class="filter-item">
						<span class="filter-title">订单时间：</span>
						<date-picker
							:newDate="newDate"
							@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
				</div>
			</template>
			<template #slot-total>
				<div class="total-list">
					<div class="total-item">
						<h3>订单数量(件)</h3>
						<p>{{ subData.orderNum }}</p>
					</div>
					<div class="total-item">
						<h3>订单商品(件)</h3>
						<p>{{ subData.salesGoods }}</p>
					</div>
					<div class="total-item">
						<h3>订单金额(元)</h3>
						<p>{{ subData.orderAmount.toFixed(2) }}</p>
					</div>
					<div class="total-item">
						<h3>支付金额(元)</h3>
						<p>{{ subData.usersPayment.toFixed(2) }}</p>
					</div>
					<div class="total-item">
						<h3>运费金额</h3>
						<p>{{ subData.salesPostPrice.toFixed(2) }}</p>
					</div>
					<div class="total-item">
						<h3>成本金额</h3>
						<p>{{ subData.salesCostprice.toFixed(2) }}</p>
					</div>
					<div class="total-item">
						<h3>净利润</h3>
						<p>{{ subData.salesProfit.toFixed(2) }}</p>
					</div>
				</div>
			</template>
			<template #slot-chart>
				<div class="e-chart">
					<div class="title">用户出单排行</div>
					<e-chart ref="charts"></e-chart>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import moment from 'moment';
import DatePicker from '@/components/DatePicker';
import EChart from '@/components/EChart';

export default {
	name: 'order',
	components: {
		DatePicker,
		EChart
	},
	data() {
		return {
			crud: null,
			selects: {
				status: ''
			},
			subData: {
				orderNum: 0,
				salesGoods: 0,
				orderAmount: 0,
				usersPayment: 0
			},
			newDate: []
		};
	},
	created() {
		let d = moment().subtract(10, 'day');

		let startTime = d
			.hour(0)
			.minute(0)
			.second(0)
			.format('YYYY-MM-DD HH:mm:ss');
		let endTime = moment().format('YYYY-MM-DD 23:59:59');

		this.newDate = [startTime, endTime];
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.statistics)
				.set('dict', {
					api: {
						page: 'orderStatistics'
					}
				})
				.set('layout', [['refresh-btn', 'slot-filter'], ['slot-total'], ['slot-chart']])
				.on('refresh', async (params, { next }) => {
					const { list, subData } = await next(params);
					this.subData = subData;
					this.$refs['charts'].refresh(this.formatChart(list));
				})
				.done();

			app.refresh({
				startTime: this.newDate[0],
				endTime: this.newDate[1]
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		// 格式化图表数据
		formatChart(list) {
			const titleArr = ['订单数量', '订单商品量', '订单金额', '支付金额'];
			let obj = {
				data: titleArr.map(item => {
					return {
						name: item,
						type: 'line',
						data: [],
						smooth: true
					};
				}),
				xAxis: [],
				legendSelect: {},
				lengend: titleArr
			};

			titleArr.map(item => {
				obj.legendSelect[item] = true;
			});
			list.map(item => {
				obj.data[0].data.push(item.orderNum);
				obj.data[1].data.push(item.salesGoods);
				obj.data[2].data.push(item.orderAmount);
				obj.data[3].data.push(item.usersPayment);
				obj.xAxis.push(item.date);
			});

			return obj;
		}
	}
};
</script>

<style lang="stylus" scoped>
.content {
    .title {
        color: #1E1E1E;
        font-size: 18px;
        font-weight: 600;
    }
    .e-chart {
        width: 100%;
        padding: 20px;
        border-radius: 8px;
        border: 2px solid  #F5F6FD;
        box-shadow: inset 0 5px 20px #F5F6FD;
    }
}
</style>
